<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>todolist</title>
    <link rel="stylesheet" href="./css/bootstrap.css">
</head>
<body>
    <div class="container mt-5">
        <h2 class="text-center">TodoList</h2>
        <!-- 输入框 -->
        <div class="input-group mb-3">
            <!-- 设置ref属性 -->
            <!-- 给输入框绑定键盘事件 -->
            <input type="text" class="form-control" placeholder="Please Enter the event you are going to do" v-model="todoEvent" ref='input_info' v-on:keyup.enter='addItem'>
            <div class="input-group-append" v-on:click="addItem">
                <button class="btn btn-outline-secondary" type="button" id="button-addon2">Submit</button>
            </div>
        </div>
        <!-- 表格 -->
        <table class="table table-hover table-dark">
            <thead>
                <tr>
                    <th scope="col" width='10%'>ID</th>
                    <th scope="col" >Event</th>
                    <th scope="col" width='20%'>IsDone</th>
                    <th scope="col" width='20%'>Handle</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item,idx) in todolist">
                    <th scope="row">{{idx+1}}</th>
                    <td>{{item.title}}</td>
                    <td>
                        <!-- 完成与否按钮 -->
                        <div class="custom-control custom-switch">
                            <input type="checkbox" class="custom-control-input" :id="btnID(idx)" v-model="item.done">
                            <label class="custom-control-label" v-bind:for="btnID(idx)">{{item.done?"Done":"Undone"}}</label>
                        </div>
                    </td>
                    <td>
                        <div class="btn-group btn-group-sm" role="group" aria-label="Basic example" v-on:click="removeItem(item.id)">
                            <button type="button" class="btn btn-danger">delete</button>
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>

    <script src="./js/vue.js"></script>
    <script>
        var vm = new Vue({
            el:'.container',
            data:{
                todolist:[
                    {
                        id: 1,
                        title: '实现个小目标，月薪过万',
                        done: true, // 是否完成
                    },
                    {
                        id: 2,
                        title: '实现第二个小目标，赚他一个亿',
                        done: false
                    }
                ],
                // 获取的输入信息
                todoEvent:''

            },
            methods:{
                // 1.生成绑定完成切换按钮的id
                btnID(idx){
                    return 'customSwitch'+(this.todolist[idx]).id;
                },
                // 2.完成状态切换
                /* 
                    * 通过非input输入框控制显示状态需要获取id再过滤
                    * checkbox的状态获取通过v-model双向数据绑定，监听获取状态即可
                */
                // completeItem(idx){
                //     this.todolist = this.todolist.map(item=>{
                //         if(item.id === idx){
                //             item.done = !item.done;
                //         }
                //         return item
                //     })
                // },
                // 3.添加数据：v-model获取表单元素属性值
                addItem(){
                    // 非空处理
                    if(!this.todoEvent.trim()){
                        alert('Please enter a non-empty to-do event!');
                        return
                    }
                    const data = {
                        id:this.todolist.length+1,
                        title:this.todoEvent,
                        done:false
                    }
                    // 插入数据
                    this.todolist.unshift(data);
                    // 清空输入框
                    this.todoEvent = '';
                    // 重新聚焦
                    this.$refs.input_info.focus();
                },
                // 4.删除数据：视图层传递item的id值过来
                removeItem(idx){
                    var tips = confirm('Are you sure want to delete this information?')
                    if(tips){
                        this.todolist = this.todolist.filter(item=>{
                            return item.id !== idx
                        })
                    }
                }
            }
        })
    </script>
</body>
</html>